<template>
  <div class="authentication_corporate">
    <div class="tip tc">
      <a-alert class="inline-b" type="warning" show-icon>
        <div slot="message">
          请输入企业的对公银行信息，非个人银行信息，只有
          <span class="danger fontw"> 3次 </span
          >申请打款机会，请核实输入信息，否则无法打款
        </div>
      </a-alert>
    </div>
    <div class="form_wrapper">
      <c-form
        v-model="form"
        :col="{ labelCol: { span: 10 }, wrapperCol: { span: 14 } }"
        ref="form"
        :data="formData"
        :rules="formRules"
        @submit="submit"
        :submitLoading="submitLoading"
      >
        <template v-slot:subbranch>
          <a-select
            v-model="form.subbranch"
            showSearch
            :showArrow="false"
            placeholder="请输入对公账户开户支行"
            @search="searchSubbranch"
            @change="subbranchChange"
            :not-found-content="subbranchLoading ? undefined : null"
            :filter-option="false"
            :dropdownMatchSelectWidth="false"
          >
            <a-spin
              v-if="subbranchLoading"
              slot="notFoundContent"
              size="small"
            ></a-spin>
            <a-select-option v-for="item in subbranchList" :key="item.bankName">
              {{ item.bankName }}
            </a-select-option>
          </a-select>
        </template>
      </c-form>
    </div>
  </div>
</template>

<script>
import { getSubbranch, authCorporateAccount } from "@/api/certify";
import { debounce } from "@/util/common";
import { paymentactivate } from "@/api/activate";

const formData = [
  {
    label: "开户名",
    prop: "companyName",
    type: "text"
  },
  {
    label: "对公银行账户",
    prop: "cardNo",
    type: "number"
  },
  {
    label: "对公账户开户支行",
    prop: "subbranch",
    slot: "subbranch"
  },
  {
    label: "手机号",
    prop: "mobile",
    type: "number"
  },
  {
    label: " ",
    colon: false,
    type: "submit",
    submitText: "确认"
  }
];

export default {
  props: {
    userAuthData: {
      type: Object
    }
  },
  data() {
    this.searchSubbranch = debounce(this.searchSubbranch, 800);
    return {
      form: {
        companyName: undefined,
        cardNo: undefined,
        subbranch: undefined,
        mobile: undefined
      },
      formData,
      formRules: {
        cardNo: [
          { required: true, message: "请输入对公银行账户", trigger: "change" }
        ],
        mobile: [{ validator: this.$vd.phone_optional, trigger: "change" }],
        subbranch: [
          {
            required: true,
            message: "请输入对公账户开户支行",
            trigger: "change"
          }
        ]
      },
      subbranchList: [],
      subbranchLoading: false,
      bankInfo: null,
      submitLoading: false
    };
  },
  computed: {
    // 是否激活
    isActivate() {
      return this.$route.name === "activateCompany";
    }
  },
  methods: {
    // 提交对公账户认证
    submit() {
      this.$refs.form.validated().then(() => {
        let _this = this;
        this.$confirm({
          title: "温馨提示",
          content: "请核实信息，是否确认提交?",
          okText: "确认",
          cancelText: "取消",
          onOk() {
            return new Promise(resolve => {
              _this.submitLoading = true;
              let request = _this.isActivate
                ? paymentactivate
                : authCorporateAccount;
              request({
                flowId: _this.userAuthData.flowId,
                bank: _this.bankInfo.bank,
                province: _this.bankInfo.province,
                city: _this.bankInfo.city,
                subbranch: _this.form.subbranch,
                cardNo: _this.form.cardNo,
                cnapsCode: _this.bankInfo.cnapsCode,
                mobile: _this.form.mobile
              })
                .then(() => {
                  _this.$emit("success", {
                    flowId: _this.userAuthData.flowId
                  });
                })
                .finally(() => {
                  _this.submitLoading = false;
                });
              resolve();
            });
          }
        });
      });
    },
    // 查询银行支行
    searchSubbranch(value) {
      if (value) {
        this.subbranchList = [];
        this.subbranchLoading = true;
        getSubbranch({
          flowId: this.userAuthData.flowId,
          keyWord: value
        })
          .then(res => {
            this.subbranchList = res.list;
          })
          .finally(() => {
            this.subbranchLoading = false;
          });
      } else {
        this.subbranchList = [];
        this.subbranchLoading = false;
      }
    },
    // 选择银行支行时触发
    subbranchChange(value) {
      this.bankInfo = this.subbranchList.filter(i => i.bankName == value)[0];
    }
  },
  created() {
    this.form.companyName = this.userAuthData.companyName;
  }
};
</script>

<style lang="scss" scoped>
.tip {
  margin-bottom: 20px;
}
</style>
